<template>
	<view>
		
		<block v-if="merchantId">
			<view class="bg">
				<view class="display-a margin-bottom_50rpx">
					<view class="bg-left">累计创作数</view>
					<view class="bg-right">累计转发数</view>
				</view>
				<view class="display-a margin-bottom_50rpx">
					<view class="bg-center">
						<view class="center-num">{{totalData.numberCreations}}</view>
						<view class="center-bot">比上周{{totalData.numberCreationsStatus == 1 ? '上升' : '下降'}} <span :class="totalData.numberCreationsStatus == 1 ? 'color_16FF31' : 'color_FF0000'">{{totalData.decline}}%</span> </view>
					</view>
					<view class="bg-center">
						<view class="center-num">{{totalData.numberForwards}} </view>
						<view class="center-bot">比上周{{totalData.numberForwardsStatus == 1 ? '上升' : '下降'}} <span :class="totalData.numberForwardsStatus == 1 ? 'color_16FF31' : 'color_FF0000'">{{totalData.rise}}%</span> </view>
					</view>
				</view>
				<view class="display-a">
					<view class="data-num">
						<view class="margin-bottom_10rpx">累计播放量</view>
						<view class="font-weight_bold font-size_36rpx">{{totalData.totalPlays}}</view>
					</view>
					<view class="data-num">
						<view class="margin-bottom_10rpx">累计点赞数</view>
						<view class="font-weight_bold font-size_36rpx">{{totalData.totalLikes}}</view>
					</view>
					<view class="data-num">
						<view class="margin-bottom_10rpx">累计评论数</view>
						<view class="font-weight_bold font-size_36rpx">{{totalData.commentCount}}</view>
					</view>
				</view>
			</view>
			
			<view class="frame" style="margin-top: -60rpx;">
				<view class="display-a margin-bottom_20rpx padding_0_20rpx">
					<view class="frame-left"></view>
					<view class="font-size_32rpx font-weight_bold">视频创作</view>
				</view>
				<view class="display-a frame-create">
					<view class="frame-data">
						<view class="color_999999 margin-bottom_20rpx">累计任务</view>
						<view class="font-weight_bold font-size_36rpx">{{spObj.accumulatedTasks}}</view>
					</view>
					<view class="line"></view>
					<view class="frame-data">
						<view class="color_999999 margin-bottom_20rpx">累计创作</view>
						<view class="font-weight_bold font-size_36rpx">{{spObj.accumulatedCreation}}</view>
					</view>
					<view class="line"></view>
					<view class="frame-data">
						<view class="color_999999 margin-bottom_20rpx">数字人任务</view>
						<view class="font-weight_bold font-size_36rpx">{{spObj.digitalHumanTask}}</view>
					</view>
					<view class="line"></view>
					<view class="frame-data">
						<view class="color_999999 margin-bottom_20rpx">数字人创作</view>
						<view class="font-weight_bold font-size_36rpx">{{spObj.digitalHumanCreation}}</view>
					</view>
				</view>
			</view>
			<view class="frame">
				<view class="display-a padding_0_20rpx margin-bottom_50rpx">
					<view class="frame-left"></view>
					<view class="font-size_32rpx font-weight_bold">爆店码</view>
					<view class="display-a frame-sel">
						<view @click="bdmConfirm(1)" :class="bdmSel == 1 ? 'frame-sel-confirm' : ''">全部</view>
						<view @click="bdmConfirm(2)" :class="bdmSel == 2 ? 'frame-sel-confirm' : ''">昨天</view>
					</view>
				</view>
				<view class="display-a padding-bottom_30rpx p-bo">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-1"></view>
							<view>活动创建数</view>
						</view>
						<view class="bdm-num">{{bdmObj.shopCount}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-2"></view>
							<view>视频转发数</view>
						</view>
						<view class="bdm-num">{{bdmObj.forwardCount}}</view>
					</view>
				</view>
				<view class="display-a padding_30rpx_0 p-bo">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-3"></view>
							<view>视频播放数</view>
						</view>
						<view class="bdm-num">{{bdmObj.playCount}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-4"></view>
							<view>视频点赞数</view>
						</view>
						<view class="bdm-num">{{bdmObj.likeCount}}</view>
					</view>
				</view>
				<view class="display-a padding-top_30rpx padding-bottom_20rpx">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-5"></view>
							<view>视频评论数</view>
						</view>
						<view class="bdm-num">{{bdmObj.commentCount}}</view>
					</view>
				</view>
			</view>
			<view class="frame">
				<view class="display-a padding_0_20rpx margin-bottom_50rpx">
					<view class="frame-left"></view>
					<view class="font-size_32rpx font-weight_bold">矩阵发布</view>
					<view class="display-a frame-sel">
						<view @click="jzConfirm(1)" :class="jzSel == 1 ? 'frame-sel-confirm' : ''">全部</view>
						<view @click="jzConfirm(2)" :class="jzSel == 2 ? 'frame-sel-confirm' : ''">昨天</view>
					</view>
				</view>
				<view class="display-a padding-bottom_30rpx p-bo">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-1"></view>
							<view>任务创建数</view>
						</view>
						<view class="bdm-num">{{jzObj.tasksCount}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-6"></view>
							<view>授权账号数</view>
						</view>
						<view class="bdm-num">{{jzObj.empowerCount}}</view>
					</view>
				</view>
				<view class="display-a padding-bottom_30rpx p-bo">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-2"></view>
							<view>视频转发数</view>
						</view>
						<view class="bdm-num">{{jzObj.videoForwardingCount}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-3"></view>
							<view>视频播放数</view>
						</view>
						<view class="bdm-num">{{jzObj.videoPlayerCount}}</view>
					</view>
				</view>
				<view class="display-a padding-top_30rpx padding-bottom_20rpx">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-4"></view>
							<view>视频点赞数</view>
						</view>
						<view class="bdm-num">{{jzObj.likeCount}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-5"></view>
							<view>视频评论数</view>
						</view>
						<view class="bdm-num">{{jzObj.commentCount}}</view>
					</view>
				</view>
			</view>
			<view class="frame">
				<view class="display-a padding_0_20rpx margin-bottom_50rpx">
					<view class="frame-left"></view>
					<view class="font-size_32rpx font-weight_bold">数字人剪辑</view>
					<view class="display-a frame-sel">
						<view @click="szrConfirm(1)" :class="szrSel == 1 ? 'frame-sel-confirm' : ''">全部</view>
						<view @click="szrConfirm(2)" :class="szrSel == 2 ? 'frame-sel-confirm' : ''">昨天</view>
					</view>
				</view>
				<view class="display-a padding-bottom_30rpx p-bo">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-1"></view>
							<view>总任务</view>
						</view>
						<view class="bdm-num">{{szrObj.totalTasks}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-2"></view>
							<view>发布总数</view>
						</view>
						<view class="bdm-num">{{szrObj.releaseCount}}</view>
					</view>
				</view>
				<view class="display-a padding_30rpx_0 p-bo">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-3"></view>
							<view>播放总数</view>
						</view>
						<view class="bdm-num">{{szrObj.totalPlays}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-4"></view>
							<view>点赞总数</view>
						</view>
						<view class="bdm-num">{{szrObj.totalLikes}}</view>
					</view>
				</view>
				<view class="display-a padding-top_30rpx padding-bottom_20rpx">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-5"></view>
							<view>评论总数</view>
						</view>
						<view class="bdm-num">{{szrObj.commentCount}}</view>
					</view>
				</view>
			</view>
			<view class="frame">
				<view class="display-a padding_0_20rpx margin-bottom_50rpx">
					<view class="frame-left"></view>
					<view class="font-size_32rpx font-weight_bold">云闪推</view>
					<view class="display-a frame-sel">
						<view @click="ystConfirm(1)" :class="ystSel == 1 ? 'frame-sel-confirm' : ''">全部</view>
						<view @click="ystConfirm(2)" :class="ystSel == 2 ? 'frame-sel-confirm' : ''">昨天</view>
					</view>
				</view>
				<view class="display-a padding-bottom_30rpx p-bo">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-1"></view>
							<view>摄像头个数</view>
						</view>
						<view class="bdm-num">{{ystObj.numberCameras}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-2"></view>
							<view>任务数</view>
						</view>
						<view class="bdm-num">{{ystObj.numberTasks}}</view>
					</view>
				</view>
				<view class="display-a padding-top_30rpx padding-bottom_20rpx">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-3"></view>
							<view>视频创作数</view>
						</view>
						<view class="bdm-num">{{ystObj.numberVideoCreations}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-4"></view>
							<view>素材剪辑数</view>
						</view>
						<view class="bdm-num">{{ystObj.numberMaterialClips}}</view>
					</view>
				</view>
			</view>
			<view class="frame">
				<view class="display-a padding_0_20rpx margin-bottom_50rpx">
					<view class="frame-left"></view>
					<view class="font-size_32rpx font-weight_bold">现场大屏</view>
					<view class="display-a frame-sel">
						<view @click="dpConfirm(1)" :class="dpSel == 1 ? 'frame-sel-confirm' : ''">全部</view>
						<view @click="dpConfirm(2)" :class="dpSel == 2 ? 'frame-sel-confirm' : ''">昨天</view>
					</view>
				</view>
				<view class="display-a padding-bottom_30rpx p-bo">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-1"></view>
							<view>活动创建数</view>
						</view>
						<view class="bdm-num">{{dpObj.shopCount}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-2"></view>
							<view>签到人数</view>
						</view>
						<view class="bdm-num">{{dpObj.signInPersonCount}}</view>
					</view>
				</view>
				<view class="display-a padding_30rpx_0 p-bo">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-3"></view>
							<view>视频播放数</view>
						</view>
						<view class="bdm-num">{{dpObj.videoPlaybackVolume}}</view>
					</view>
					<view class="bdm-line"></view>
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-4"></view>
							<view>视频点赞数</view>
						</view>
						<view class="bdm-num">{{dpObj.videoLikes}}</view>
					</view>
				</view>
				<view class="display-a padding-top_30rpx padding-bottom_20rpx">
					<view class="frame-bdm-data">
						<view class="display-a-jc color_666666 margin-bottom_10rpx">
							<view class="drop drop-5"></view>
							<view>视频评论数</view>
						</view>
						<view class="bdm-num">{{dpObj.numberOfVideoComments}}</view>
					</view>
				</view>
			</view>
			<view class="frame">
				<view class="display-a padding_0_20rpx margin-bottom_50rpx">
					<view class="frame-left"></view>
					<view class="font-size_32rpx font-weight_bold">抖支付</view>
					<view class="margin-left-auto">成交笔数: <span class="color_FF0000 margin-left_10rpx font-size_32rpx">{{doPayObj.numberTransactions}}</span></view>
				</view>
				<view class="display-a">
					<view class="frame-data" style="width: 234rpx;">
						<view class="bdm-num margin-bottom_10rpx">{{doPayObj.paymentAmount}}</view>
						<view class="color_999999">成交总金额</view>
					</view>
					<view class="line"></view>
					<view class="frame-data" style="width: 234rpx;">
						<view class="bdm-num margin-bottom_10rpx">{{doPayObj.wxPaymentAmount}}</view>
						<view class="color_999999">微信成交金额</view>
					</view>
					<view class="line"></view>
					<view class="frame-data" style="width: 234rpx;">
						<view class="bdm-num margin-bottom_10rpx">{{doPayObj.zfbPaymentAmount}}</view>
						<view class="color_999999">支付宝成交金额</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			
		</block>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				bdmSel: 1, //爆店码 1全部 2昨天
				bdmDate: '',
				bdmObj: {},
				
				jzSel: 1, //矩阵发布 1全部 2昨天
				jzDate: '',
				jzObj: {},
				
				ystSel: 1, //云闪推 1全部 2昨天
				ystDate: '',
				ystObj: {},
				
				dpSel: 1, //现场大屏 1全部 2昨天
				dpDate: '',
				dpObj: {},
				
				szrSel: 1, //数字人剪辑 1全部 2昨天
				szrDate: '',
				szrObj: {},
				
				doPayObj: {}, //抖支付
				spObj: {}, //视频剪辑
				totalData: {}, //总数据
				
				merchantId: '',
			}
		},
		
		onLoad() {
			
			if (!uni.getStorageSync('merchantId')) {
				uni.showModal({
					title: '登录提示',
					content: '请先去登录',
					success: (res) => {
						if (res.confirm) {
							uni.reLaunch({
								url: '/pages/index/login?type=9'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}else {
				this.merchantId = uni.getStorageSync('merchantId');
				this.getTotalData();
				this.getBdmCount();
				this.getJzCount();
				this.getSpCount();
				this.getDoPayCount();
				this.getYstCount();
				this.getDpCount();
				this.getSzrCount();
			}
		},
		
		onShow() {
			
		},
		
		methods: {
			
			//商家总数据
			async getTotalData() {
				const result = await this.$http.get({
					url: this.$api.videoData,
					data: {
						merchantId: uni.getStorageSync('merchantId'),
					}
				});
				if (result.code == 2000) {
					this.totalData = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			//1矩阵发布  2数字人剪辑  3现场大屏
			//4视频剪辑  5云闪推  6抖支付
			//7同城爆店码  
			
			//爆店码
			bdmConfirm(type) {
				this.bdmSel = type;
				let time = this.$date.getDate("lastOneDay").startTime;
				this.bdmDate = this.bdmSel == 1 ? '' : time.replace(" ","");
				this.getBdmCount();
			},
			
			//爆店码数据
			async getBdmCount() {
				const result = await this.$http.get({
					url: this.$api.mCount,
					data: {
						types: 7,
						merchantId: uni.getStorageSync('merchantId'),
						createTime: this.bdmDate
					}
				});
				if (result.code == 2000) {
					this.bdmObj = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			//矩阵发布
			jzConfirm(type) {
				this.jzSel = type;
				let time = this.$date.getDate("lastOneDay").startTime;
				this.jzDate = this.jzSel == 1 ? '' : time.replace(" ","");
				this.getJzCount();
			},
			
			//矩阵发布数据
			async getJzCount() {
				const result = await this.$http.get({
					url: this.$api.mCount,
					data: {
						types: 1,
						merchantId: uni.getStorageSync('merchantId'),
						createTime: this.jzDate
					}
				});
				if (result.code == 2000) {
					this.jzObj = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			//云闪推
			ystConfirm(type) {
				this.ystSel = type;
				let time = this.$date.getDate("lastOneDay").startTime;
				this.ystDate = this.ystSel == 1 ? '' : time.replace(" ","");
				this.getYstCount();
			},
			
			//云闪推数据
			async getYstCount() {
				const result = await this.$http.get({
					url: this.$api.mCount,
					data: {
						types: 5,
						merchantId: uni.getStorageSync('merchantId'),
						createTime: this.ystDate
					}
				});
				if (result.code == 2000) {
					this.ystObj = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			//现场大屏
			dpConfirm(type) {
				this.dpSel = type;
				let time = this.$date.getDate("lastOneDay").startTime;
				this.dpDate = this.dpSel == 1 ? '' : time.replace(" ","");
				this.getDpCount();
			},
			
			//现场大屏数据
			async getDpCount() {
				const result = await this.$http.get({
					url: this.$api.mCount,
					data: {
						types: 3,
						merchantId: uni.getStorageSync('merchantId'),
						createTime: this.dpDate
					}
				});
				if (result.code == 2000) {
					this.dpObj = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			//抖支付数据
			async getDoPayCount() {
				const result = await this.$http.get({
					url: this.$api.mCount,
					data: {
						types: 6,
						merchantId: uni.getStorageSync('merchantId'),
						createTime: ''
					}
				});
				if (result.code == 2000) {
					this.doPayObj = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			//视频剪辑数据
			async getSpCount() {
				const result = await this.$http.get({
					url: this.$api.mCount,
					data: {
						types: 4,
						merchantId: uni.getStorageSync('merchantId'),
						createTime: ''
					}
				});
				if (result.code == 2000) {
					this.spObj = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			//数字人
			szrConfirm(type) {
				this.szrSel = type;
				let time = this.$date.getDate("lastOneDay").startTime;
				this.szrDate = this.szrSel == 1 ? '' : time.replace(" ","");
				this.getSzrCount();
			},
			
			//数字人剪辑数据
			async getSzrCount() {
				const result = await this.$http.get({
					url: this.$api.mCount,
					data: {
						types: 2,
						merchantId: uni.getStorageSync('merchantId'),
						createTime: this.szrDate
					}
				});
				if (result.code == 2000) {
					this.szrObj = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
		}
	}
</script>

<style lang="scss">
	
	.drop {
		width: 18rpx;
		height: 18rpx;
		border-radius: 100rpx;
		margin-right: 10rpx;
	}
	
	.drop-1 {
		background-color: #1FABFA;
	}
	
	.drop-2 {
		background-color: #5A87FA;
	}
	
	.drop-3 {
		background-color: #7A69E1;
	}
	
	.drop-4 {
		background-color: #47C381;
	}
	
	.drop-5 {
		background-color: #FFBD01;
	}
	
	.drop-6 {
		background-color: #FF7915;
	}
	
	.bdm-num {
		color: #3787FF;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.p-bo {
		border-bottom: 1px solid #EBF0FF;
	}
	
	.bdm-line {
		background-color: #EBF0FF;
		width: 2rpx;
		height: 120rpx;
	}
	
	.frame-bdm-data {
		// width: 234rpx;
		width: 354rpx;
		text-align: center;
	}
	
	.frame-sel-confirm {
		background-color: #FFF;
		color: #1E6CEB;
		border-radius: 100rpx;
		padding: 8rpx 0;
	}
	
	.frame-sel {
		width: 216rpx;
		margin-left: auto;
		background-color: #1E6CEB;
		border-radius: 100rpx;
		padding: 4rpx;
		color: #FFF;
		font-size: 26rpx;
		view {
			width: 104rpx;
			text-align: center;
		}
	}
	
	.frame-data {
		width: 166rpx;
		text-align: center;
	}
	
	.data-num {
		width: 250rpx;
		text-align: center;
		color: #FFF;
	}
	
	.center-num {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFF;
		margin-bottom: 10rpx;
	}
	
	.center-bot {
		width: 260rpx;
		background-color: #346FED;
		padding: 6rpx 12rpx;
		border-radius: 100rpx;
		font-size: 26rpx;
		margin-left: 58rpx;
		color: #FFF;
		span {
			margin-left: 8rpx;
			font-weight: 600;
		}
	}
	
	.bg-center {
		text-align: center;
		width: 374rpx;
	}
	
	.bg-right {
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	
	.bg-left {
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-left: 40rpx;
		width: 390rpx;
	}
	
	.line {
		background-color: #EBF0FF;
		width: 2rpx;
		height: 60rpx;
	}
	
	.frame-create {
		width: 670rpx;
		background: #FAFAFF;
		padding: 20rpx 0;
		border-radius: 20rpx;
		margin-left: 20rpx;
	}
	
	.frame-left {
		width: 10rpx;
		height: 28rpx;
		background-color: #0C91F3;
		border-radius: 10rpx;
		margin-right: 16rpx;
	}
	
	.frame {
		width: 710rpx;
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 30rpx 0 20rpx;
		margin-bottom: 24rpx;
		margin-left: 20rpx;
	}
	
	.bg {
		width: 750rpx;
		height: 496rpx;
		background: url('~static/125.png');
		background-repeat: no-repeat;
		background-size: contain;
		padding-top: 60rpx;
	}
	
</style>
